<template>
    <view class="income-content">
        <view class="center-detail">
            <view class="center-item center-fans">
                <view class="center-col center-width" v-if="Data.benefitMode == 1 || Data.cumulativeProfit">
                    <view class="center-point">
                        <text>累计收益(积分)</text>
                    </view>
                    <view class="center-fannum">{{ floatDivide(Data.cumulativeProfit, 100) }}</view>
                </view>
                <view class="center-col center-width" v-if="Data.benefitMode == 1 || Data.cumulativeProfit">
                    <view class="center-point">
                        <text>待结算收益(积分)</text>
                    </view>
                    <view class="center-fannum">{{ floatDivide(Data.toBeSettled, 100) }}</view>
                </view>
                <view class="center-col center-width" v-if="Data.benefitMode == 2 || Data.cumulativeProfitCash">
                    <view class="center-point">
                        <text>累计收益(元)</text>
                    </view>
                    <view class="center-fannum">￥{{ floatDivide(Data.cumulativeProfitCash, 100) }}</view>
                </view>
                <view class="center-col center-width" v-if="Data.benefitMode == 2 || Data.cumulativeProfitCash">
                    <view class="center-point">
                        <text>待结算收益(元)</text>
                    </view>
                    <view class="center-fannum">￥{{ floatDivide(Data.toBeSettledCash, 100) }}</view>
                </view>
            </view>
        </view>
        <view class="income-check">
            <text>收益明细</text>
            <view class="income-btn">
                <button
                    @click="changeTab(index)"
                    v-for="(item, index) in Data.tabList"
                    :key="index"
                    :class="['income-tab', Data.tab == index ? 'tab-red' : '']">
                    {{ item }}
                </button>
            </view>
        </view>
        <view class="income-container">
            <view v-if="Data.dataList.length" class="myIntegral-list">
                <view v-for="(item, index) in Data.dataList" :key="index" class="integral-item">
                    <view class="integral-record">
                        <view
                            class="name"
                            @click="
                                router.push(
                                    '/pages-user/distributi/distributiPage/incomeDetail?orderId=' + item.orderId
                                )
                            ">
                            <text>订单：{{ item.orderNo }}</text>
                            <image :src="getImgOssUrl('/ui-prod-2.8.0/white-jiantou.png')" class="income-go"></image>
                        </view>
                        <!-- 1-待结算 2-已结算 3-失效 -->
                        <view
                            :class="[
                                'income-text',
                                item.performanceStatus == 1
                                    ? 'red-color'
                                    : item.performanceStatus == 2
                                    ? 'green-color'
                                    : 'gray-color'
                            ]"
                            >{{ orderStatus[item.performanceStatus] }}</view
                        >
                    </view>
                    <view class="integral-record">
                        <view class="income-from">来源：{{ item.sourceName }}</view>
                        <view class="income-point">
                            {{ item.benefitMode == 2 ? '￥' : '' }}{{ floatDivide(item.performance, 100)
                            }}{{ item.benefitMode == 1 ? '积分' : '' }}
                        </view>
                    </view>
                    <view class="integral-record">
                        <view class="income-from">{{ item.performanceTime }}</view>
                        <view class="income-recore">{{ item.type == 1 ? '推广奖励' : '邀请奖励' }}</view>
                    </view>
                </view>
            </view>
            <view v-else class="no-data">
                <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
                暂无数据
            </view>
            <view class="list-loading">
                {{ isBottom && Data.dataList.length ? (listLoading ? '加载中…' : '已经到底啦！') : '' }}
            </view>
            <Loading />
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, computed, nextTick } from 'vue';
import { onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import store from '@/store';
import Loading from '@/components/el-loading';
import { checkToken, getImgOssUrl, floatDivide } from '@/commons/utils';
const props = defineProps({
    num: {
        type: Number,
        default: 0
    }
});
const orderStatus = ref(['', '待结算', '已结算', '已失效']);
let listLoading = ref(false);
const Data = reactive({
    cumulativeProfit: '', //累计收益
    toBeSettled: '', //含待结算
    cumulativeProfitCash: '', //累计收益-现金
    toBeSettledCash: '', //含待结算-现金
    benefitMode: '', //1积分2现金
    dataList: [],
    page: 1,
    perPage: 10,
    scrollTop: 0,
    totalCount: 0,
    tab: 0,
    tabList: ['今日', '本月', '全部']
});
const changeTab = index => {
    Data.tab = index;
    Data.dataList = [];
    Data.page = 1;
    getIntegralList();
};
const isBottom = computed(() => {
    return Data.scrollTop > 50;
});
const getIntegralList = async () => {
    listLoading.value = true;
    const { page, perPage } = Data;
    let tabData = [1, 2, 0];
    let res = await request('profitList', {
        timeType: tabData[Data.tab],
        page: Data.page,
        perPage: Data.perPage
    });
    Data.benefitMode = res.data.benefitMode;
    Data.cumulativeProfit = res.data.cumulativeProfit;
    Data.toBeSettled = res.data.toBeSettled;
    Data.cumulativeProfitCash = res.data.cumulativeProfitCash;
    Data.toBeSettledCash = res.data.toBeSettledCash;
    let list = res.data.data.list || [];
    if (page === 1) {
        Data.dataList = list;
    } else {
        Data.dataList = Data.dataList.concat(list);
    }
    listLoading.value = false;
    Data.totalCount = res.data.data.totalCount;
};
onShow(() => {
    Data.tab = props.num;
    getIntegralList();
});
onPageScroll(e => {
    Data.scrollTop = e.scrollTop;
});
// 上拉加载
onReachBottom(() => {
    if (Data.totalCount === Data.dataList.length) {
        return;
    }
    Data.page++;
    getIntegralList();
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
